<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<title>高阶函数_函数柯里化</title>
	</head>
	<body>
		<!-- 准备好一个“容器” -->
		<div id="test"></div>

		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.development.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/react-dom.development.js"></script>
		<!-- 引入babel，用于将jsx转为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>

		<script type="text/babel">
			/*
                高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。
                    1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
                    2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。
                    常见高阶函数：Promise、setTimeout、arr.map()等
                函数柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。
                    function sum (a){
                        return(b)=>{
                            return(c)=>{
                                return a+b+c
                            }
                        }
                    }
            */

			// 创建组件
			class Login extends React.Component {
				// 初始化状态
				state = {
					username: "", //用户名
					password: "", //密码
				};

				// 保存表单数据到状态中
				saveFormData = (dataType) => {
					return (event) => {
						this.setState({ [dataType]: event.target.value });
					};
				};

				// 表单提交的回调
				handleSubmit = (event) => {
					event.preventDefault(); //阻止默认行为
					const { username, password } = this.state;
					alert(`你输入的用户名是：${username}，你输入的密码是：${password}`);
				};

				render() {
					return (
						<form action="" onSubmit={this.handleSubmit}>
							<label>
								用户名：
								<input onChange={this.saveFormData("username")} type="text" placeholder="请输入用户名" name="username" />
							</label>
							<label>
								密码：
								<input onChange={this.saveFormData("password")} type="password" placeholder="请输入密码" name="password" />
							</label>
							<button>登录</button>
						</form>
					);
				}
			}
			// 渲染组件到页面
			ReactDOM.render(<Login />, document.getElementById("test"));
		</script>
	</body>
</html>
